<template>
	<!-- 为你推荐 -->
	<view class="hot-goods u-m-b-10 u-p-x-16">
		<view class="u-waterfall" v-if="goodsType === 1">
			<view id="u-left-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="(leftGoods,index) in leftList" :key="index">
					<shopro-goods-card
						:detail="leftGoods"
						:type="leftGoods.activity_type"
						:image="leftGoods.image"
						:title="leftGoods.title"
						:subtitle="leftGoods.subtitle"
						:price="leftGoods.price"
						:originPrice="leftGoods.original_price"
						:sales="leftGoods.sales"
						:tagTextList="leftGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
					></shopro-goods-card>
				</view>
			</view>
			<view id="u-right-column" class="u-column">
				<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="(rightGoods,index) in rightList" :key="index">
					<shopro-goods-card
						:detail="rightGoods"
						:type="rightGoods.activity_type"
						:image="rightGoods.image"
						:title="rightGoods.title"
						:subtitle="rightGoods.subtitle"
						:price="rightGoods.price"
						:originPrice="rightGoods.original_price"
						:sales="rightGoods.sales"
						:tagTextList="rightGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
					></shopro-goods-card>
				</view>
			</view>
		</view>
		<!-- m -->
		<view class="big-card-wrap u-p-10" v-if="goodsType === 2">
			<block v-for="(item,index) in goodsList" :key="index">
				<shGoodsCard
				v-if="!flag_big"
					:detail="item"
					:type="item.activity_type"
					:image="item.image"
					:title="item.title"
					:subtitle="item.subtitle"
					:price="item.price"
					:originPrice="item.original_price"
					:sales="item.sales"
					:tagTextList="item.activity_discounts_tags"
					:isadFlag="item.is_ad"
					@click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })"
				></shGoodsCard>
				<view class="cell_BIG" v-else @click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
					<view class="cell_l">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="cell_r">
						<text class="title_cell">
							<!-- 恢复免疫调节保健品送父母口服液冬虫夏草 -->
							{{item.title}}
						</text>
						<view class="price_cell">
							￥ <text>{{item.price}}</text> <text v-if="item.is_ad==1" class="ADBIGBOX">广告</text>
						</view>
						<text class="num_cell">
							{{item.sales}}人已抢
						</text>
					</view>
				</view>
			</block>
		</view>
		<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center" @tap.stop="loadMore">
			<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999" :class="{ 'refresh-active': isRefresh }"></text>
			{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		</button>
	</view>
</template>

<script>
/**
 * 自定义之为你推荐
 * @property {Object} detail - 推荐商品信息
 */
import shGoodsCard from './sh-goods-card.vue';
export default {
	components: {
		shGoodsCard
	},
	computed:{
		// 是否为大字版
		flag_big(){
			return this.$store.state.user.isBIG
		},
		// list(){
		// 	return console.log('woshi1',this.goodsList);
		// }
	},
	data() {
		return {
			listParams: {
				page: 1,
				index:1
			}, //当前分页
			lastPage: 1, //总分页
			total: 0, //总商品数
			perPage: 0, //单页商品数
			goodsList: [],
			isRefresh: false,

			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: [],

			goodsType: this.detail.style // 商品模板
		};
	},

	props: {
		detail: {
			type: Object,
			default: () => {}
		},
		ind:{
			type: String,
			default : ''
		}
	},
	created() {
		console.log('接收参数',this.detail);
		if(this.ind=='indexPage'){
			this.listParams.index = 1
		}
		if (this.detail.id) {
			this.listParams.category_id = this.detail.id;
			this.getGoodsList();
		}
		if (this.detail.ids) {
			if(this.goodsType==2){
				console.log('首页去除id数组');
			} else {
				this.listParams.goods_ids = this.detail.ids;
			}
			
			this.getGoodsList();
		}
		// if(this.goodsType==2){
			
		// }
	},
	methods: {
		// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.tempList = [];
		},

		// 商品列表
		getGoodsList() {
			let that = this;
			that.$http('goods.lists', this.listParams).then(res => {
				// console.log('商品列表',res.data.data);
				if (res.code === 1) {
					this.lastPage = res.data.last_page;
					this.total = res.data.total;
					this.perPage = res.data.per_page;
					this.isRefresh = false;
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.tempList = res.data.data;
					that.goodsList.length && that.splitData();
				}
			});
		},

		// 加载更多
		loadMore() {
			if (!this.isRefresh) {
				// 加载更多
				if (this.listParams.page < this.lastPage) {
					this.isRefresh = true;
					this.listParams.page += 1;
					this.getGoodsList();
				} else {
					// 重置为1页数据
					this.listParams.page = 1;
					this.lastPage = 1;
					this.goodsList = [];
					this.clear();
					this.getGoodsList();
				}
			}
		},
		btommFun(){
			if(this.listParams.page < this.lastPage){
				this.loadMore()
			} else {
				console.log('没有更多了');
			}
			
		}
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}

.u-image {
	width: 100%;
}
// 为你推荐
.hot-goods {
	background: none;
	.refresh-btn {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 156rpx;
		line-height: 50rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
	}
	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}
}

		
		.cell_BIG {
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			border-radius: 10px;
			margin-bottom: 9px;
			.cell_l {
				width: 45%;
				image {
					max-width: 100%;
					max-height: 170px;
					border-radius: 10px;
				}
			
			}
			.cell_r {
				position: relative;
				flex: 1;
				margin-left: 10px;
				    display: flex;
				    flex-direction: column;
				    justify-content: space-between;
					padding-top: 9px;
					padding-bottom: 4px;
					box-sizing: border-box;
				text {
					display: block;
				}
				.title_cell {
					font-size: 22px;
					font-weight: bold;
					color: #000;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				.price_cell {
					// transform: translateY(5px);
					position: absolute;
					bottom: 36px;
					left: 0px;
					color: #ff0000;
					font-size: 20px;
					font-weight: bold;
					display: flex;
					align-items: baseline;
					width: 100%;
					text {
						font-size: 28px;
					}
					.ADBIGBOX {
						position: absolute;
						right: 0;
						top: 25%;
						font-size: 16px;
					}
				}
				.num_cell {
					font-size: 20px;
					font-weight: normal;
					color: #ff0000;
				}
			}
		}
	

</style>
